<template>
	<view class="header">
		<view class="header-item" v-for="(item,index) in headerTab" :key="item.id" @click="handleHeader(item.state)">
			<text :class="{active:headerActive==item.state}">{{item.title}}</text>
		</view>

	</view>
	<view class="order-list">
		<view class="order-item" v-for="(item,index) in pageData" :key="index" @click="bindOrderInfo(item)">
			<view class="top">
				<view class="">
					<image v-if="item.businessType ==1" src="/static/order-nianjian.png" mode=""></image>
					<image v-if="item.businessType ==3" src="/static/order-boyang.png" mode=""></image>
					<image v-else src="/static/shop.png" mode=""></image>
					<view style="">
						<text class="label">车搭档</text>
						<text class="value slh">{{item.orderNumber}}</text>
					</view>
				</view>
				<text class="status" style="color: #FE9B23;" v-if="headerActive==4">退款中</text>
				<text class="status" style="color: #FE9B23;" v-if="headerActive==5">已退款</text>
			</view>
			<view class="content">
				<view class="left">
					<image src="/static/opder-tao.jpg" v-if="item.businessType ==1" mode=""></image>
					<image src="/static/opder-tao.jpg" v-if="item.businessType ==3" mode=""></image>
					<image src="/static/logo.png" v-if="item.businessType ==5" mode=""></image>
					<image src="/static/order-xiche.jpg" v-if="item.businessType ==2" mode=""></image>
					<image src="/static/opder-shop.jpg" v-if="item.businessType ==4" mode=""></image>
					<view class="">
						<text class="title">{{item.productInfoName}}</text>
						<!-- <text class="sub-title">小车</text> -->
					</view>
				</view>
			</view>
		</view>

		<uni-empty v-if="emptyState"></uni-empty>
	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		orderPageList,
		getSignupWeixin
	} from '@/api'
	import {
		onLoad,
		onReachBottom,
		onShow,

	} from '@dcloudio/uni-app'
	import {
		wxOpenid,

	} from '@/utils/login-sdk.js'
	const emptyState = ref(false)
	const pageData = ref([])
	const queryParams = ref({
		"page": 1, //分页页码，数字类型
		"pageSize": 10, //分页条数
		"memberId": '', //会员ID
		"status": 4
	})
	onLoad(() => {
		getList()
	})
	onReachBottom(() => {
		queryParams.value.page++
		getList()
	})
	const headerActive = ref(4)
	const headerTab = ref([{
			title: "已申请退款订单",
			id: "header-1",
			state: 4
		},
		{
			title: "退款记录",
			id: "header-2",
			state: 5
		}
	])
	/** 点击header*/
	const handleHeader = (index) => {
		headerActive.value = index
		queryParams.value.page = 1
		queryParams.value.status = index
		getList()
	}
	/** 订单列表 */
	const getList = async () => {
		const res = await orderPageList(queryParams.value)
		if (queryParams.value.page == 1) {
			pageData.value = res.result.list
		} else {
			pageData.value = pageData.value.concat(res.result.list)
		}

		if (pageData.value.length == 0) {
			emptyState.value = true
		} else {
			emptyState.value = false
		}
	}
	const bindOrderInfo = (item)=>{
		uni.navigateTo({
			url:'/pages/orderInfo/orderInfo?id='+item.id
		})
	}
</script>

<style lang="scss">
	page {
		background: #F8F5F0;
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom);
		/*兼容 IOS>11.2*/
	}

	.header {
		height: 92rpx;

		padding: 0 57rpx;
		display: flex;

		align-items: center;

		.header-item {
			height: 92rpx;
			margin-right: 75rpx;

			text {
				color: #8D8D8D;
				font-size: 32rpx;
				display: block;
				margin-top: 20rpx;
			}

			.active {
				color: #16191B;
			}

			.active::after {
				content: "";
				display: block;
				width: 54rpx;
				height: 7rpx;
				background: #FE9B23;
				border-radius: 4rpx;
				margin: 10rpx auto 0;

			}

		}

	}

	.order-list {

		padding: 0 24rpx;

		.order-item {
			width: 630rpx;
			padding: 36rpx;
			background: #FFFFFF;
			border-radius: 36rpx;
			margin-bottom: 18rpx;

			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;

				view {
					display: flex;
					align-items: center;

					image {
						display: block;
						width: 54rpx;
						height: 54rpx;
						margin-right: 11rpx;
						flex-shrink: 0;
					}

					.label{
						font-size: 30rpx;
						color: #16191B;
					}
					.value {
						font-size: 30rpx;
						color: #16191B;
						width: 280rpx;
						display: block;
					}
				}

				.status {
					font-size: 28rpx;
					color: #ED4538;
				}
			}

			.content {
				margin-top: 23rpx;
				border-top: 2rpx solid #F2F2F2;
				padding-top: 31rpx;
				display: flex;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: flex-start;
					flex: 2;

					image {
						width: 150rpx;
						height: 150rpx;
						background: #EDEDED;
						display: block;
						margin-right: 18rpx;
					}

					>view {
						display: flex;
						justify-content: space-between;
						align-items: center;
						flex: 2;

						>view {
							display: flex;
							align-items: center;

							.title {
								color: #16191B;
								font-size: 30rpx;
								display: block;
							}

						}

						>text {
							font-size: 26rpx;
							color: #16191B;
						}
					}
				}

				.right {
					text {
						font-size: 30rpx;
						color: #16191B;
						display: block;
						text-align: right;
					}

					.btn {
						width: 160rpx;
						height: 70rpx;
						background: #FE9B23;
						border-radius: 35rpx;
						display: block;
						font-size: 26rpx;
						color: #FEFFFF;
						margin-top: 43rpx;
						line-height: 70rpx;
					}
				}
			}
		}

		.item {
			width: 638rpx;
			padding: 40rpx 32rpx;
			background: #FFFFFF;
			border-radius: 28rpx;
			margin: 24rpx auto;

			.item-header {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.title {
					font-size: 28rpx;
					color: #2B2B2B;
				}

				.status {
					color: #EF3C3C;
					font-size: 28rpx;
				}
			}

			.content {
				width: 638rpx;
				padding: 30rpx 0;
				background: #F6F6F6;
				border-radius: 28rpx;
				margin: 35rpx auto 0;
				overflow: hidden;

				.item-b {
					display: flex;
					justify-content: space-between;

					view {
						display: flex;
						align-items: center;
					}
				}

				.item-c {
					display: flex;
					align-items: center;

					.unit {
						width: 12rpx;
						height: 12rpx;
						background: #FE9C24;
						border-radius: 50%;
						display: block;
						margin-left: 30rpx;
					}

					.value {
						font-weight: bold;
						font-size: 30rpx;
						color: #2B2B2B;
						margin-left: 20rpx;
						width: 350rpx;
					}

					.price {
						font-size: 26rpx;
						color: #16191B;
						margin-right: 42rpx;
					}
				}
			}

			.bottom {
				display: flex;
				margin-top: 28rpx;
				justify-content: space-between;
				align-items: center;
				width: 100%;

				.left {

					>text {

						font-size: 26rpx;
						color: #979797;

					}
				}

			}
		}

	}
</style>